<template>
    <div class="replaceTag">
        <div class="replaceTagTitle">{{title}}</div>
        
        <div class="replaceTagContent_1" v-if='show'>
            <p class="detail">请扫描新标签，来绑定替换</p>
            <div class="loading_style">
                <Spin size="large"></Spin>
            </div>
            <div>
                <Button style="margin-left: 8px" @click='cancle'>取消</Button>
            </div>
        </div>
        <div class="currenTaginfo" v-if="!show">
            <Table :columns="Tagcolumns" border :data="Tagdata" :show-header = 'false' v-if="tableshow"></Table>
            <img :src="tagImg" alt="" style="width:100%;margin-top:15px;">
            <div style="text-align:center;margin-top:15px;" v-if="btngroup_1">
                <Button type="primary" @click="replaceAction" style="background-color: #ea901f;border-color: #ea901f;">开始</Button>
                <Button style="margin-left: 8px" @click='cancle'>取消</Button>
            </div>
            <div style="margin-top:15px;" v-if="!btngroup_1">
                <Button long @click="backTohome">返回首页</Button>
            </div>

        </div>
    </div>
</template>
<script>
import util from '../../util/util'
export default {
    data(){
        return {
            tagImg:'',
            show:false,
            btngroup_1:true,
            tableshow:true,
            title:'提示',
            Tagcolumns:[
                {
                    title: 'tagtitle',
                    width: 90,
                    key: 'tagtitle',
                    render:(h,params)=>{
                        return h('div',[
                            h('span',{
                                style:{
                                    color:'rgb(234, 144, 31)',
                                    fontWeight:'700'
                                }
                            },params.row.tagtitle)
                        ])
                    }
                },
                {
                    title: 'info',
                    key: 'info'
                }
            ],
            Tagdata:[
                
            ]
        }
    },
    created(){
        if(this.$router.history.current.params.addTag){
            this.show = false;
            this.title = '新增成功';
            this.btngroup_1 = false;
            this.tableshow = true;
            let info = this.$store.state.TagInfo;
            if(info.tname){
                this.Tagdata = [
                    {
                        tagtitle:'变电站',
                        info:info.tsname
                    },
                    {
                        tagtitle:'设备类型',
                        info:info.tname
                    },
                    {
                        tagtitle:'设备编组',
                        info:info.group_name
                    },
                    {
                        tagtitle:'设备名称',
                        info:info.name
                    },
                    {
                        tagtitle:'设备编号',
                        info:info.did
                    },
                    {
                        tagtitle:'绑定标签',
                        info:info.uid
                    }
                ];
            }else{
                this.Tagdata = [
                    {
                        tagtitle:'变电站',
                        info:info.tsname
                    },
                    {
                        tagtitle:'设备类型',
                        info:'网关'
                    },
                    {
                        tagtitle:'设备名称',
                        info:info.name
                    },
                    {
                        tagtitle:'设备编号',
                        info:info.rid
                    },
                    {
                        tagtitle:'绑定标签',
                        info:info.uid
                    }
                ];
            }
            this.tagImg = info.pic_path;
            return false;
        }
        
        if(this.$store.state.RegisterStatus=='0'){
            this.show=true;
            if(!sessionStorage.getItem('uid')){
                this.show=true;
                this.title = '提示';
                //保存未注册的新标签id
                let uid = location.href.split('#')[0];
                uid = uid.split('&uid=')[1];
                sessionStorage.setItem('uid', uid);
                let deviceType = location.href.split('#')[0];
                deviceType = deviceType.split('device=')[1].split('&')[0];
                sessionStorage.setItem('device',deviceType);
            }else{
                //新标签id
                let uid = location.href.split('#')[0];
                uid = uid.split('&uid=')[1];
                let deviceType = location.href.split('#')[0];
                deviceType = deviceType.split('device=')[1].split('&')[0];

                if(deviceType != sessionStorage.getItem('device')){
                    this.show=true;
                    this.title = '提示';
                    //保存未注册的新标签id
                    let uid = location.href.split('#')[0];
                    uid = uid.split('&uid=')[1];
                    sessionStorage.setItem('uid', uid);
                    sessionStorage.setItem('device',this.$router.history.current.params.device);
                }else{
                    this.replaceDevice(sessionStorage.getItem('deviceid'),uid);
                }
            }
        }else{
            if(!sessionStorage.getItem('uid')){
                this.show=false;
                this.title = '替换';
                this.tableshow = true;
                this.btngroup_1 = true;
                this.showtabledata();
            }else{
                let uid = location.href.split('#')[0];
                uid = uid.split('&uid=')[1];

                let deviceType = location.href.split('#')[0];
                deviceType = deviceType.split('device=')[1].split('&')[0];
                
                if(deviceType != sessionStorage.getItem('device')){
                    this.show=false;
                    this.title = '替换';
                    this.tableshow = true;
                    this.btngroup_1 = true;
                    this.showtabledata();
                }else{
                    let ouid = sessionStorage.getItem('uid');
                    if(ouid==uid){
                        this.show=false;
                        this.title = '替换';
                        this.tableshow = true;
                        this.btngroup_1 = true;
                        this.showtabledata();
                        return false;
                    }else{
                        this.replaceDevice(this.$store.state.TagInfo.id,sessionStorage.getItem('uid'));
                    }
                }
            }
        }
    },
    methods:{
        replaceDevice:function(id,uid){
            let vm = this;
            let deviceType = location.href.split('#')[0];
            deviceType = deviceType.split('device=')[1].split('&')[0];
            if(deviceType==='device'){
                util.ajax({
                    method: 'PATCH',
                    url: '/api-device/'+id+'/',
                    data:{
                        uid:uid
                    }
                })
                .then(function (response) {
                    if(response.status==200){
                        vm.title = '替换成功';
                        vm.btngroup_1 = false;
                        vm.tableshow = true;
                        vm.show = false;
                        sessionStorage.removeItem("uid");
                        sessionStorage.removeItem("deviceid");
                        sessionStorage.removeItem("device");
                        vm.showreplaceinfo(response.data);
                    }else{
                        vm.$Message.error('替换失败');
                    }
                })
                .catch(function(err){
                    vm.$Message.error('网络错误');
                })
            }
            if(deviceType==='reader'){
                util.ajax({
                    method: 'PATCH',
                    url: '/api-reader/'+id+'/',
                    data:{
                        uid:uid
                    }
                })
                .then(function (response) {
                    if(response.status==200){
                        vm.title = '替换成功';
                        vm.btngroup_1 = false;
                        vm.tableshow = true;
                        vm.show = false;
                        sessionStorage.removeItem("uid");
                        sessionStorage.removeItem("deviceid");
                        sessionStorage.removeItem("device");
                        vm.showreplaceinfo(response.data);
                    }else{
                        vm.$Message.error('替换失败');
                    }
                })
                .catch(function(err){
                    vm.$Message.error('网络错误');
                })
            }
            
        },
        cancle:function(){
            this.$router.replace({name:'phoneHome'});
        },
        backTohome:function(){
            this.$router.replace({name:'phoneHome'});
        },
        replaceAction:function(){
            if(location.href.indexOf('uid=')){
                let uid = location.href.split('#')[0];
                uid = uid.split('&uid=')[1];
                let deviceType = location.href.split('#')[0];
                deviceType = deviceType.split('device=')[1].split('&')[0];
                sessionStorage.setItem('uid', uid);
                sessionStorage.setItem('device',deviceType);
                sessionStorage.setItem('deviceid',this.$store.state.TagInfo.id);
            }
            this.show = true;
        },
        showtabledata:function(){
            let info = this.$store.state.TagInfo;
            let deviceType = location.href.split('#')[0];
            deviceType = deviceType.split('device=')[1].split('&')[0];
            if(deviceType==='device'){
                this.Tagdata = [
                    {
                        tagtitle:'变电站',
                        info:info.tsname
                    },
                    {
                        tagtitle:'设备类型',
                        info:info.tname
                    },
                    {
                        tagtitle:'设备编组',
                        info:info.group_name
                    },
                    {
                        tagtitle:'设备名称',
                        info:info.name
                    },
                    {
                        tagtitle:'设备编号',
                        info:info.did
                    },
                    {
                        tagtitle:'绑定标签',
                        info:info.uid
                    }
                ];
            }else{
                this.Tagdata = [
                    {
                        tagtitle:'变电站',
                        info:info.tsname
                    },
                    {
                        tagtitle:'设备类型',
                        info:'网关'
                    },
                    {
                        tagtitle:'设备名称',
                        info:info.name
                    },
                    {
                        tagtitle:'设备编号',
                        info:info.did
                    },
                    {
                        tagtitle:'绑定标签',
                        info:info.uid
                    }
                ];
            }
            this.tagImg = info.pic_path;
        },
        showreplaceinfo:function(info){
            let deviceType = location.href.split('#')[0];
            deviceType = deviceType.split('device=')[1].split('&')[0];
            if(deviceType==='device'){
                this.Tagdata = [
                    {
                        tagtitle:'变电站',
                        info:info.tsname
                    },
                    {
                        tagtitle:'设备类型',
                        info:info.tname
                    },
                    {
                        tagtitle:'设备编组',
                        info:info.group_name
                    },
                    {
                        tagtitle:'设备名称',
                        info:info.name
                    },
                    {
                        tagtitle:'设备编号',
                        info:info.did
                    },
                    {
                        tagtitle:'绑定标签',
                        info:info.uid
                    }
                ];
            }else{
                this.Tagdata = [
                    {
                        tagtitle:'变电站',
                        info:info.tsname
                    },
                    {
                        tagtitle:'设备类型',
                        info:'网关'
                    },
                    {
                        tagtitle:'设备名称',
                        info:info.name
                    },
                    {
                        tagtitle:'设备编号',
                        info:info.rid
                    },
                    {
                        tagtitle:'绑定标签',
                        info:info.uid
                    }
                ];
            }
            this.tagImg = info.pic_path;
        }
    }
}
</script>
<style scoped>
.replaceTag{
    padding: 20px 5%;
}
.replaceTagTitle{
    width: 100%;
    height: 70px;
    text-align: center;
    font-size: 20px;
    line-height: 70px;
    border-bottom: 1px solid #f3f3f3;
}
.detail{
    font-size: 16px;
    text-align: center;
    line-height: 50px;
}
.replaceTagContent_1{
    text-align: center;
}
.loading_style{
    width: 30px;
    height: 40px;
    display: inline-block;
}
.currenTaginfo{
    width: 100%;
    padding: 10px 20px;
}
</style>
